<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后代选择器</title>
		<style>
			/* 后代选择器 ：派生、空格  用途：选中父元素中的子元素
			语法： 任意选择器【父级】 任意选择器{}
			 网页：嵌套元素
			*/
		   dl dd{
			   color: aqua;
			   background-color: bisque;
		   }
		   ul li{
			 color: red; 
			  background-color: aqua;
		   }
		   ul .ml,.nj{
			   
			   color: green;
			   font-size: 50px;
			  
		   }
		   /* 后代选择器  选择删除线20px，颜色红色，背景黑色 */
		   #nav div div del{
			   color: #f00;
			   background-color: black;
			   font-size: 20px;
		   }
		   
		   
		   h1:hover{
			   color: #f00;
		   }
		   .bh:focus{
			   border: 2px solid red;
		   }
		   button:active{
			   background-color: black;
		   }
		   body:active{
			   background-color: black;
		   }
		   
		   
		   .ftoor div div div s{
			   font-size: 36px;
			   background-color: #ffaaff;
		   }
		   .ftoor div s{
			   font-size: 36px;
			   background-color: #ffaaff;
		   }
		   
		</style>
	</head>
	<body>
		<div id="nav">
			<span>这是一个段落</span>
			<div> <p>第一个段落</p> <div> <del>删除线</del> </div> </div>
			<div> <p>第二个段落</p> </div>
		</div>
		<div class="ftoor">
			<div><div><div> <s>删除线</s> <span>行内元素</span></div> </div> </div>
			<div> <s>删除线</s> </div>
		</div>
		    
			
			
		<hr>
		<!-- 块元素：定义列表 无序列表-->
		<dl>
			<dt>图片1</dt>
			<dd>解释小图片</dd>
		</dl>
		<ul>
			<li>窗外</li>
			<li class="ml">情深深雨蒙蒙</li>
			<li class="nj">还珠格格</li>
			<li>依赖你有梦</li>
		</ul>
		
		
		<h1>SB勾子</h1>
		<input type="text" class="bh"/>
		<input type="password" />
		<button>按钮</button>
	</body>
</html>